<template>
  <div class="header-wrapper">
    <div class="header-left">
      <h1>{{ config.title || '标题' }}</h1>
      <!-- 选择器 -->
      <div class="select-box">
        <!-- 地区编码 -->
        <a-select
          v-if="componentProps && componentProps.showAreaCode && componentProps.areaCode"
          ref="select"
          v-model:value="form.areaCode"
          :bordered="false"
          @change="handleChangeArea"
          dropdownClassName="header-select"
        >
          <a-select-option v-for="item in areaConfig" :key="item.key" :value="Number(item.key)">{{
            item.value
          }}</a-select-option>
          <template #suffixIcon>
            <svg-icon icon-class="arrows-down" class="arrows-down"></svg-icon>
          </template>
        </a-select>
        <!-- 路网类型 -->
        <a-select
          v-if="componentProps && componentProps.showRoadType && componentProps.roadType"
          ref="select"
          v-model:value="form.roadType"
          :bordered="false"
          @change="handleChangeRoad"
          dropdownClassName="header-select"
        >
          <a-select-option v-for="item in roadTypeArr" :key="item.key" :value="Number(item.key)">{{
            item.value
          }}</a-select-option>
          <template #suffixIcon>
            <svg-icon icon-class="arrows-down" class="arrows-down"></svg-icon>
          </template>
        </a-select>
      </div>
    </div>
    <div class="header-right">
      <div class="organization">{{ $get(userInfo, 'orgInfos.0.orgName') }}</div>
      <!-- 天气 -->
      <!-- <weather /> -->
      <!-- 时间 -->
      <header-time />
      <!-- 操作项 -->
      <ul class="handle-menu">
        <li @click="toHome">
          <svg-icon icon-class="home" />
          首页
        </li>
        <li>
          <svg-icon icon-class="user" />
          {{ userInfo.name }}
        </li>
        <li @click="handlerLogout">
          <svg-icon icon-class="exit" />
          退出
        </li>
        <li @click="handleFullscreen">
          <svg-icon icon-class="full-screen" />
        </li>
      </ul>
    </div>
    <div class="bg">
      <img class="left" src="./images/header-l.png" alt="" />
      <img class="right" src="./images/header-r.png" alt="" />
    </div>
  </div>
</template>

<script>
import { areaConfig } from '@/config/city-config.js'
import HeaderTime from 'motherSet/components/Time.vue'
// import Weather from 'motherSet/components/Weather.vue'
import { mapGetters } from 'vuex'
import config from '@/config'
/**
 * 头部
 * @author 朱琦
 * @date   时间：2022/10/31
 */
export default {
  name: 'Header',
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    HeaderTime
    // Weather
  },
  data() {
    return {
      fullscreen: false,
      form: {
        areaCode: null,
        roadType: 2
      },
      areaConfig,
      roadTypeArr: [
        { value: '全省路网', key: '' },
        { value: '普通公路', key: 2 },
        { value: '高速公路', key: 1 }
      ]
    }
  },
  computed: {
    ...mapGetters('config', ['pageData']),
    componentProps() {
      return this.config.componentProps || {}
    },
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  created() {},
  mounted() {
    // debugger
    this.form.areaCode = Number(this.$route.query.areaCode || this.componentProps.areaCode)
    this.form.roadType = Number(this.$route.query.roadType || this.componentProps.roadType)
    this.$store.commit('config/SET_AREA_CODE', this.form.areaCode)
    this.$store.commit('config/SET_ROAD_TYPE', this.form.roadType)
    this.setRoute()
  },
  methods: {
    /**
     * 改变地区编码
     * @param {String} val
     */
    handleChangeArea(val) {
      this.$store.commit('config/SET_AREA_CODE', val)
      this.resetStoreDetail()
      this.setRoute()
    },

    /**
     * 改变路网类型
     * @param {String} val
     */
    handleChangeRoad(val) {
      this.$store.commit('config/SET_ROAD_TYPE', val)
      this.resetStoreDetail()
      this.setRoute()
    },

    setRoute() {
      this.$router.replace({
        name: this.$route.name,
        params: this.$route.params,
        query: {
          areaCode: this.form.areaCode || '',
          roadType: this.form.roadType || ''
        }
      })
    },

    /**
     * 点击全屏
     */
    handleFullscreen() {
      this.fullscreen = !this.fullscreen

      if (this.fullscreen) {
        const el = document.documentElement
        const rfs =
          el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
        if (typeof rfs != 'undefined' && rfs) {
          rfs.call(el)
        } else if (typeof window.ActiveXObject != 'undefined') {
          const wscript = new window.ActiveXObject('WScript.Shell')
          if (wscript != null) {
            wscript.SendKeys('{F11}')
          }
        }
      } else {
        const el = document
        const cfs =
          el.cancelFullScreen ||
          el.mozCancelFullScreen ||
          el.msExitFullscreen ||
          el.webkitExitFullscreen ||
          el.exitFullscreen
        if (cfs) {
          cfs.call(el)
          return
        } else if (typeof window.ActiveXObject !== 'undefined') {
          const wscript = new window.ActiveXObject('WScript.Shell')
          if (wscript != null) {
            wscript.SendKeys('{F11}')
          }
        } else {
          alert('浏览器不支持全屏API或已被禁用')
        }
      }
    },

    /**
     * @desc 重置store detailConfig
     * **/
    resetStoreDetail() {
      this.$store.commit('config/SET_DETAIL_CONFIG', {})
    },

    /**
     * 退出
     */
    handlerLogout() {
      this.$store.dispatch('user/handlerLogout')
    },

    /**
     *回到首页
     */
    toHome() {
      window.location.href = config.homePath
    }
  }
}
</script>

<style scoped lang="less">
@import url(~bComponent/styles/themes);
@height: 67px;

.header-wrapper {
  display: flex;
  position: relative;
  height: @height;
  justify-content: space-between;
  z-index: 3;

  > div {
    z-index: 2;
  }

  .header-left {
    margin-left: 33px;
    display: flex;

    .icon-logo {
      width: 30px;
      height: 30px;
    }

    h1 {
      font-family: @font-title-family;
      background: @primary-color linear-gradient(0deg, @primary-color 43%, #269bff 86%);
      background-clip: text;
      color: transparent;
      font-size: 30px;
      letter-spacing: 1.5px;
      line-height: 65px;
      width: 400px;
    }

    .select-box {
      margin-top: 20px;

      .selectCss() {
        font-family: @font-title-family;
        color: @primary-color;
        letter-spacing: 1.68px;
        font-size: 15px;
      }

      .ant-select {
        background: url(./images/header-select.png);
        background-size: 100% 100%;
        padding-left: 5px;
      }

      /deep/.ant-select-selector {
        border: 0;
        width: 120px;
        height: 43px;
        text-align: center;
        color: @primary-color;

        .ant-select-selection-item {
          .selectCss();
          line-height: 35px;
        }
      }

      /deep/.ant-select-arrow {
        right: 0.22rem;
        margin-top: -0.115rem;
      }

      /deep/.ant-select-single.ant-select-open .ant-select-selection-item {
        .selectCss();
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding-top: 5px;
    color: #555555;

    .organization {
      list-style: none;
    }

    .handle-menu {
      display: flex;
      align-items: center;
      padding-top: 11px;
      padding-left: 20px;

      li {
        font-size: 14px;
        color: @primary-color;
        margin-left: 30px;
        list-style: none;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          color: #edaa0a;
        }

        .svg-icon {
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 1;

    .left {
      height: 100%;
      flex-shrink: 0;
    }

    .right {
      flex: 1;
    }
  }
}
</style>
<style lang="less">
.header-select {
  width: 100px !important;
  min-width: auto !important;
  overflow: hidden;
  padding: 0;
  border: 1px solid #83a3e2;

  .ant-select-item-option-selected {
    background: #dee9f9 !important;
    font-weight: 400 !important;
  }
}

.rc-virtual-list-scrollbar-show {
  width: 4px !important;
}

.rc-virtual-list-scrollbar-thumb {
  opacity: 0.2;
}
</style>
